import React, { Component, Suspense } from 'react'
import { Layout } from 'antd'
import { Switch, Route, Redirect } from 'react-router-dom'
import routes from '@/router/routes'
const { Content } = Layout
export default class MyContent extends Component{
  generateRoutes = (routes) => {
    const result = []
    routes.forEach(route => {
      if (route.children) {
        result.push(<Redirect key={route.path} exact from={route.path} to={route.redirect}></Redirect>)
        result.push(...this.generateRoutes(route.children))
      } else {
        result.push(<Route key={route.path} path={route.path} component={route.component}></Route>)
      }
    })
    return result
  }
  render() {
    const homePath = routes[0].path
    return (
      <Content style={{ margin: '24px 16px', minHeight: 280, backgroundColor: '#fff', boxShadow: 'rgb(199 204 209) 0px 2px 8px' }}>
        <div style={{ height: '100%', overflowY: 'auto', padding: 24 }}>
          <Suspense fallback={<div>loading...</div>}>
            <Switch>
              <Redirect exact from="/" to={homePath} />
              {this.generateRoutes(routes)}
            </Switch>
          </Suspense>
        </div>
      </Content>
    )
  }
}